import React from 'react';
import { useNavigate } from 'react-router-dom';
import './Navbar.css';

interface NavbarProps {
  onLoginClick?: () => void;
}

const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
  const navigate = useNavigate();

  const handleLoginClick = () => {
    if (onLoginClick) {
      onLoginClick();
    } else {
      navigate('/login');
    }
  };

  const navItems = [
    { label: '模板素材', hasDropdown: true },
    { label: '设计场景', hasDropdown: true },
    { label: '工具推荐', hasDropdown: true },
    { label: '资源教程', hasDropdown: true },
  ];

  return (
    <nav className="navbar">
      <div className="nav-left">
        {navItems.map((item, index) => (
          <div key={index} className="nav-item">
            <span>{item.label}</span>
            {item.hasDropdown && (
              <svg className="dropdown-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none">
                <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}
          </div>
        ))}
      </div>
      <div className="nav-right">
        <button className="membership-btn">
          <svg className="crown-icon" width="16" height="16" viewBox="0 0 16 16" fill="none">
            <path d="M8 1L10.5 5.5L15 6.5L12 10L13 14.5L8 12L3 14.5L4 10L1 6.5L5.5 5.5L8 1Z" fill="#FFD700"/>
          </svg>
          订购会员
        </button>
        <button className="login-btn" onClick={handleLoginClick}>
          登录/注册
        </button>
      </div>
    </nav>
  );
};

export default Navbar; 